import React from 'react'
import PropTypes from 'prop-types';
import {connect} from 'dva';
import request from './../../services/login/login';
import style from './login.css'
import {openModal, User } from './../../utils/utils'
import './../../homeaa.css';
import {Form, Input, Checkbox, Icon, Button, span} from 'antd';
const FormItem = Form.Item;
function hasError(fieldErrer) {
   return Object.keys(fieldErrer).some((value)=>{
    return fieldErrer[value]
   })
};

class Login extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      loading: false
    }
  };
  changeLoding = (e) => {
     this.setState({
       loading:true
     });
    var self = this;
    this.props.form.validateFields(function (err,value) {
      request(value, (data)=>{
        if(data.data.code == 200){
          User.setLoginInfo(data.data.data);
          location.href = "/home";
        }else{
          openModal('error', '登录失败', data.message);
        }
        self.setState({loading: false});
      });
    });
  };
  reset = (e) =>{
    this.props.form.resetFields();
  };
  render() {
    const colObj = {
      labelCol: {
        span:20,
        offset:2
      },
      wrapperCol:{
        span:20,
        offset:2
      },
    };
    const { getFieldDecorator, getFieldError, isFieldTouched, getFieldsError} = this.props.form;
    const  isUserName =  isFieldTouched("userName") && getFieldError("userName");
    const  passwordError =isFieldTouched("password") && getFieldError("password");
    return (
      <div className={style.content}>
      <Form className={style.mg10}>
        <FormItem {...colObj}
                  validateStatus={isUserName ? 'error' : ''}
                  help={isUserName || ''}
                  hasFeedback>
          {getFieldDecorator('userName', {
            rules: [
              {required: true, message: "请输入账号!"},
              {pattern: /^\d*$/, message: "账号必须输数字!"}
            ],
          })(
            <Input prefix={<Icon type="user" style={{fontSize: 13}}/>} placeholder="Username"/>
          )}
        </FormItem>
        <FormItem {...colObj}
                  validateStatus={passwordError ? 'error' : ''}
                  help={passwordError || ''}
                  hasFeedback>
          {getFieldDecorator('password', {
            rules: [{required: true, message: 'Please input your Password!'}],
          })(
            <Input prefix={<Icon type="lock" style={{fontSize: 13}}/>} type="password" placeholder="Password"/>
          )}
        </FormItem>
        <FormItem {...colObj}>
          {getFieldDecorator('remember', {
            valuePropName: 'checked',
            initialValue: false,
          })(
            <Checkbox>Remember me</Checkbox>
          )}
        </FormItem>
        <FormItem {...colObj}>
          <Button type="primary" loading={this.state.loading} onClick={this.changeLoding} htmlType="submit" className={style.loginformbutton}  disabled={hasError(getFieldsError())}>
            登入
          </Button>
          <Button type="primary"  onClick={this.reset} htmlType="submit" className={style.loginformbutton}>
            重置
          </Button>
        </FormItem>
      </Form>
      </div>
    )
  }
};
export default Form.create()(Login)
